<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title id="t1">10-v-bind 切换背景色</title>
</head>

<body>

	<h2>v-bind 设置元素属性</h2>

	<div id="app1">
		<a href="#" @click="pre" v-show="preBtn">上一色</a>
		<div :style="{backgroundColor:bgc}" class="capp1"></div>
		<a href="#" @click="next" v-show="nextBtn">下一色</a>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var scores = ["red", "blue", "yellow", "cyan", "gray", "orange"]
		var index = 0;

		var data = {
			preBtn: false,
			nextBtn: true,
			bgc: scores[index]
		}
		// new Vue({}) 大小写敏感
		var app = new Vue({
			el: "#app1",
			data: data,
			methods: {
				pre: function () {
					if (index > 0) {
						this.bgc=scores[--index]
						this.nextBtn = true
						console.log("颜色：" + this.bgc + ", 索引：" + index + "，动态颜色：" +  scores[index]);
						if (index == 0) {
							this.preBtn = false
						}
					} else {
						this.preBtn = false
					}
				},
				next: function () {
					if (index < scores.length-1) {
						this.bgc=scores[++index]
						this.preBtn = true;
						console.log("颜色：" + this.bgc + ", 索引：" + index + "，动态颜色：" +  scores[index]);
					} else {
						this.nextBtn = false
					}
				}
			}
		})
	</script>

	<style>
		.capp1 {
			width: 200px;
			height: 200px;
		}
	</style>

</body>

</html>